<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-placeholder span{color:#F7D5A5 !important;}
		
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
				font-size: 13px;
				margin-top:8px;
				color: #333;
			}
			.mui-table-view .mui-media-object {
				max-width: 75px;
				height: 75px;
			}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable {
				background-color: #EC971F;
			}
			.mui-scroll-wrapper{
				background-color: #EFEFF4;
			}
			.offCanva-header img{
				border-radius: 80px;
			}
		</style>
	</head>

	<body style="background-color: white;">
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				// swipeBack: true //启用右滑关闭功能
			})
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
		</script>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
			<!-- 侧滑菜单部分 -->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-grid-view" style="margin-top: 0px; background-color: #EC971F;">
							<li id="login" class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#" class="offCanva-header">
									<img class="mui-media-object" src="images/home/touxiang_moren.jpg" style="width: 110px; height: 110px;">
									<div style="color: white;font-size: 20px; margin-top: 10px;">点击头像登录</div>
								</a>
							</li>
						</ul>
						<div class="offCanva-content" style="background-color: #EFEFF4; padding-top: 20px; padding-bottom: 90px;">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										我的钱包
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										最近浏览
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										收藏
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										评价
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										关于我们
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										联系客服
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell" id="setting">
									<a class="mui-navigate-right">
										设置
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主界面部分 -->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav" style="background-color: #EC971F;">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" style="color: white;"></a>
					<h1 class="mui-title" style="color: white;" id="location">
						<span class="mui-icon mui-icon-location"></span>
						河北民族师范学院</h1>
					<span id="search" class="mui-icon mui-icon-search" style="color: white; float: right;"></span>
				</header>

				<!-- CONTENT -->
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-grid-view" style="margin-top: 0px;">
							<li class="mui-table-view-cell mui-media mui-col-xs-6" style="width: 25%;">
								<a href="#">
									<img class="mui-media-object" src="images/home/koubei.png" style="width: 66%;
		max-width: 66%;">
									<div class="mui-media-body">口碑好评</div>
								</a></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6" style="width: 25%;">
								<a href="#">
									<img class="mui-media-object" src="images/home/tejia.png" style="width: 66%;
		max-width: 66%;">
									<div class="mui-media-body">今日特价</div>
								</a></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6" style="width: 25%;">
								<a href="#"><img class="mui-media-object" src="images/home/yiyuan.png" style="width: 66%;
		max-width: 66%;">
									<div class="mui-media-body">一元窗口</div>
								</a></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6" style="width: 25%;">
								<a href="#">
									<img class="mui-media-object" src="images/home/kinds.png" style="width: 66%;
		max-width: 66%;">
									<div class="mui-media-body">全部分类</div>
								</a></li>
						</ul>
						<div class="banner" style="background-color: white;">
							<img src="images/home/banner.png" style="width: 100%;">
						</div>
						<div style="width: 100%; background-color: white;">
							<div style="margin: auto; width: 94%;">
								<p style="font-size: 20px; color: #000000;">口碑好评</p>
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media koubei">
										<a href="javascript:;" class="reserve"  colr="#FFFFFF">
											<img class="mui-media-object mui-pull-left" src="images/home/huangmenji.jpg">
											<div class="mui-media-body" title="黄焖鸡米饭">
												黄焖鸡米饭
												<p style="font-size: 12px;"><span style="color: #FFD161;margin-right: 7px;">★★★★★</span>月售1031</p>
												<p style="font-size: 12px;"><span>起送 ￥10</span>&nbsp;|&nbsp;<span>配送 ￥1</span>&nbsp;|&nbsp;<span>人均 ￥10</span></p>
												<p style="font-size: 12px;"><span style="font-weight: bolder;">窗口位置:</span><span>学一食堂二楼③窗口</span></p>
											</div>
										</a>
										<button type="button" class="mui-btn mui-btn-yellow">预约</button>
									</li>
									<li class="mui-table-view-cell mui-media koubei" >
										<a href="javascript:;" class="reserve"  colr="#006833">
											<img class="mui-media-object mui-pull-left" src="images/home/lanzhoulamian.jpg">
											<div class="mui-media-body" title="兰州拉面">
												兰州拉面
												<p style="font-size: 12px;"><span style="color: #FFD161;margin-right: 7px;">★★★★★</span>月售1031</p>
												<p style="font-size: 12px;"><span>起送 ￥10</span>&nbsp;|&nbsp;<span>配送 ￥1</span>&nbsp;|&nbsp;<span>人均 ￥10</span></p>
												<p style="font-size: 12px;"><span style="font-weight: bolder;">窗口位置:</span><span>学二食堂二楼③窗口</span></p>
											</div>
										</a>											
										<button type="button" class="mui-btn mui-btn-yellow">预约</button>
									</li>
									<li class="mui-table-view-cell mui-media koubei">
										<a href="javascript:;" class="reserve" colr="#F7FCF6">
											<img class="mui-media-object mui-pull-left" src="images/home/xiaoshidai.jpg">
											<div class="mui-media-body" title="小食代">
												小食代
												<p style="font-size: 12px;"><span style="color: #FFD161;margin-right: 7px;">★★★★★</span>月售1031</p>
												<p style="font-size: 12px;"><span>起送 ￥10</span>&nbsp;|&nbsp;<span>配送 ￥1</span>&nbsp;|&nbsp;<span>人均 ￥10</span></p>
												<p style="font-size: 12px;"><span style="font-weight: bolder;">窗口位置:</span><span>学一食堂二楼④窗口</span></p>
											</div>
										</a>											
										<button type="button" class="mui-btn mui-btn-yellow">预约</button>
									</li>
									<li class="mui-table-view-cell mui-media koubei">
										<a href="javascript:;" class="reserve" colr="#BC7820">
											<img class="mui-media-object mui-pull-left" src="images/home/kaoroubanfan.png">
											<div class="mui-media-body" title="烤肉拌饭">
												烤肉拌饭
												<p style="font-size: 12px;"><span style="color: #FFD161;margin-right: 7px;">★★★★★</span>月售1031</p>
												<p style="font-size: 12px;"><span>起送 ￥10</span>&nbsp;|&nbsp;<span>配送 ￥1</span>&nbsp;|&nbsp;<span>人均 ￥10</span></p>
												<p style="font-size: 12px;"><span style="font-weight: bolder;">窗口位置:</span><span>学一食堂三楼⑥窗口</span></p>
											</div>
										</a>											
										<button type="button" class="mui-btn mui-btn-yellow">预约</button>
									</li>
								</ul>
								<p style="font-size: 20px; color: #000000; margin-top: 10px;">今日特价</p>
								<ul class="mui-table-view mui-grid-view">
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="images/home/kaoroubanfan.png">
											<div class="mui-media-body">奥尔良烤肉拌饭</div>
										</a></li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="images/home/doujiao.png">
											<div class="mui-media-body">豆角肉丝盖饭</div>
										</a></li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#"><img class="mui-media-object" src="images/home/shuijiao.png">
											<div class="mui-media-body">韭菜鸡蛋水饺</div>
										</a></li>
									<li class="mui-table-view-cell mui-media mui-col-xs-6">
										<a href="#">
											<img class="mui-media-object" src="images/home/yuxiang.png">
											<div class="mui-media-body">鱼香肉丝盖饭</div>
										</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script type="text/javascript">
			// 搜索页面
			document.getElementById("search").addEventListener("tap", function() {
				mui.openWindow({
					url: 'home/search.html',
					id: 'home/search.html',
					styles: {
						top: "25px", //子页面顶部位置
					},
					show: {
						autoShow: true,
						aniShow: "fade-in",
						duration: 100
					}
				})
			});
			// 位置页面
			document.getElementById("location").addEventListener("tap", function() {
				mui.openWindow({
					url: 'home/location.html',
					id: 'home/location.html',
					styles: {
						top: "25px", //子页面顶部位置
						bottom: "0px"
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 200
					}
				})
			});
			// 预约页面
			mui(".koubei").on("tap", "button", function() {
				var name = this.previousElementSibling.children[1].getAttribute("title");
				var loc = this.previousElementSibling.children[1].children[2].children[1].innerHTML;
				mui.openWindow({
					url: 'home/reserve.html',
					id: 'home/reserve.html',
					styles: {
						titleNView: {
							type: 'transparent', //透明渐变样式
							titleText: '预约',
							titleColor: 'white',
							backgroundColor: '#EC971F',
							autoBackButton: true
						}
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 200
					},
					waiting: {
						aotuShow: true,
						title: '正在加载^'
					},
					extras: {
						loc: loc,
						name: name
					}
				})
			})
			// 设置页面
			document.getElementById("setting").addEventListener("tap", function() {
				mui.openWindow({
					url: 'home/setting.html',
					id: 'home/setting.html',
					show: {
						autoShow: true,
						aniShow: "fade-in",
						duration: 100
					},
					styles: {
						top: "25px", //子页面顶部位置
					}
				})
			});

			// 侧滑菜单
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if (!mui.os.android) {
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			
			// 登录
			document.getElementById("login").addEventListener("tap", function() {
				mui.openWindow({
					url: 'login.html',
					id: 'login.html',
					styles: {
						top: "25px", //子页面顶部位置
						bottom: "0px"
					},
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 200
					}
				})
			});
			//点击饭店
			mui(".koubei").on("tap","a",function(){
				var name = this.children[1].getAttribute("title");
				var color = this.getAttribute("colr");
				var resimg = "../"+ this.children[0].getAttribute("src");
				mui.openWindow({
					url:"canteen/restaurant.html",
					id:"canteen/restaurant.html",
					show:{
						autoShow:true,
						aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
						duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
					},
					styles:{
						titleNView: {
							type:'transparent',//透明渐变样式
							titleText: name,
							titleColor:'black',
							backgroundColor: color,
							autoBackButton:true
						},
					},
					waiting:{
						autoShow:false,//自动显示等待框，默认为true
						title:'正在加载...',//等待对话框上显示的提示内容
					},
					extras:{
						name:name,
						resimg:resimg,
						color:color
					},
					});
			})	
		</script>
	</body>
</html>
